<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>姓名案例_计算属性语法</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        计算属性:
        1.定义:要用的属性不存在,要通过已有属性计算得来。
        2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter.
        3.get是什么时候执行?
            (1)初次读取时会执行一次。
            (2)当依赖的数据发生改变时会被再次调用。
        4.优势:与methods实现相比，内部有缓存机制(复用），效率更高，调试方便。
        5.备注:
            1.计算属性最终会出现在vm上直接读取使用即可。
            2.如果计算属性要被修改，那必须写set函数去相应的修改，且set中要引起计算时依赖的数据发生改变
    -->

    <div id="app">
        姓：<input type="text" v-model="firstName"/><br/><br/>
        名：<input type="text" v-model="lastName"/><br/><br/>
        全名：<span>{{fullName}}</span>
    </div>
    <script>
    //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
                firstName: '张',
                lastName: '三'
           },
           methods:{
           },
           computed:{
               // 完整版写法
               fullName: {
                   //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就会作为fullName的值;
                   //get什么时候调用？1.初次读取fullName的时候；2.所依赖的数据发生变化时;
                   get:function(){
                        console.log("get被调用了");
                        return this.firstName+"-"+this.lastName;
                   },
                   //set什么时候被调用？当fullName被修改的时候
                   set(value){
                        console.log("set被调用");
                        const arr = value.split("-");
                        this.firstName=arr[0];
                        this.lastName=arr[1];
                   }
               },
               // 简写版写法
               fullName2(){
                    console.log("简写版");
                    return this.firstName+"-"+this.lastName;
               }
           }
        });
    </script>
</body>

</html>